<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
<script src="${ctx}/static/plugins/echarts/echarts.js" type="text/javascript"></script>
</head>

<body class="easyui-layout" style="font-family: '微软雅黑'"> 
  <div data-options="region:'north',split:false,border:true" style="overflow:hidden;">
		<div id="tb" style="padding:5px;height:auto">
			<div>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-standard-page-go" plain="true" onclick="exportData()">数据导出</a>
			</div> 
		</div>
	</div>

  <div id="statisticalTable" data-options="region:'west',split:true,border:false,title:'统计表'" style="width: 500px;">
    <table id="dg"></table>
  </div>

  <div id="statisticalChart" data-options="region:'center',split:true,border:true,title:'统计图'">
  </div>

	<iframe id="fileDownFrame" src="" style="display:none; visibility:hidden;"></iframe> 
<script type="text/javascript">
var height;

function renderTable (){
  $('#dg').datagrid({
      method: "get",
      url:'${ctx}/userDeptReport/getTableData', 
      fit : true,
      fitColumns : true,
      border : false,
      pagination:false,
      rownumbers:true,
      pageNumber:1,
      pageSize : 10,
      singleSelect:true,
      striped:true,
      columns:[[    
            {field:'userDept',align:'center',title:'营业部',sortable:false,width:50},
            {field:'totall',align:'center',title:'用户数量',sortable:false,width:50}
        ]],
        enableHeaderClickMenu: false,
        enableHeaderContextMenu: false,
        enableRowContextMenu: false,
      });
}

function renderChart() {
	var elementHeight = 40;
	
  // 路径配置
  require.config({
      paths: {
          echarts: '${ctx}/static/plugins/echarts'
      }
  });

  $.get("${ctx}/userDeptReport/getChartData", function(result){
    if(height < result.value.length * elementHeight){
    	$("#statisticalChart").height(result.value.length * elementHeight);
    }
	  
    require(
          [
              'echarts',
              'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
          ],
          function (ec) {
              // 基于准备好的dom，初始化echarts图表
              var myChart = ec.init(document.getElementById('statisticalChart')); 

              var option = {
                  title : {
                      text: '各营业部用户使用情况统计（人）',
                      x: 'center' //标题居中显示
                  },
                  tooltip: {
                      show: true,
                      trigger: 'axis'
                  },
                  xAxis : [
                      {
                          type : 'value',
                      }
                  ],
                  yAxis : [
                      {
                    	  name : '营业部',
                          type : 'category',
                          data : result.category
                      }
                  ],
                  series : [
                      {
                    	  name : '用户数',
                          "type" : "bar",
                          data : result.value
                      }
                  ]
              };
      
              // 为echarts对象加载数据 
              myChart.setOption(option); 
              if(height < result.value.length * elementHeight){
            	  $("#statisticalChart").css({"overflow":"auto"});
                $("#statisticalChart").height(height-30);
              }
          }
      );
  });

}

//导出数据
function exportData(){
  	$("#fileDownFrame").attr("src", "${ctx}/userDeptReport/export");
}

$(function(){
	height = $("body").innerHeight();
	renderTable();
  	renderChart();
});
</script>
</body>
</html>